import React, { useMemo } from "react";
import { ReactPropTypes, useState } from "react"
/**
 * 结论是父组件一更新只要不是purecomponent 或者 should之类的返回false， 那么自组件都会重新计算
 */
export default function HookParent() {
    const [index, setIndex] = useState(0);
    return <>
        <button onClick={() => {setIndex(index + 1)}}>你好👋,点击+1</button>
        <h2>{index}</h2>
        <HookChild key="1" />
        <ClassChild key="2"/>
        <ClassChild key="3"/>
        <HookChildWithUseEffect key="4"></HookChildWithUseEffect>
        <ChildWithPure key="5"></ChildWithPure>
        <ChildWithPure></ChildWithPure>
        {/* {index % 2 ? <div>
            <ClassChild/>
        </div> : <ClassChild/>} */}
        {index % 2 ? <div key="6">
            <ClassChild/>
        </div> : <ClassChild key="6" keyValue="6"/>}
    </>
}

function HookChild() {
    const currentDate = new Date().toString();
    return <div>
        当前时间: {currentDate}
    </div>
}

class ClassChild extends React.Component<{keyValue?: string}, {}> {
    componentWillUnmount() {
        console.log('🌧️ ClassChild will unmount with no key', this.props.keyValue)
    }
    render() {
        const currentDate = new Date().toString();
        return <div>
            当前时间: {currentDate}
        </div>
    }
}

function HookChildWithUseEffect() {
    console.log('🐟 hookchildwithuseeffect1')

    const date = useMemo(() => {
        console.log('🐟 hookchildwithuseeffect')
        return <div>
            当前时间: {new Date().toString()}
        </div>;
    },[]);
    return date;
}

class ChildWithPure extends React.PureComponent {
    render() {
        const currentDate = new Date().toString();
        return <div>
            当前时间: {currentDate}
        </div>
    }
}